<!-- 最左边的选择框 -->
<template>
	<div class="mycard">
		<header>
			<img :src="user.img" class="avatar" />
		</header>
		<div class="navbar" @click="clearSearch">
			<router-link to="/chat" class="icon iconfont icon-msg"></router-link>
			<router-link to="/friend" class="icon iconfont icon-friend"></router-link>
			<router-link to="/my" class="icon iconfont icon-collection"></router-link>
		</div>
		<footer>
			<i class="icon iconfont icon-more"></i>
		</footer>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState(['user']),
	},
	methods: {
		clearSearch() {
			this.$store.dispatch('search', '');
		},
	},
};
</script>

<style lang="scss" scoped>
@import '../../../../../assets/fonts/iconfont.css';
.mycard {
	position: relative;
	width: 100%;
	height: 100%;
}
.mycard .avatar {
	width: 36px;
	height: 36px;
	margin: 20px 12px 0 12px;
	border-radius: 2px;
}
.mycard .navbar {
	width: 100%;
	text-align: center;
}
.mycard .icon {
	display: inline-block;
	font-size: 26px;
	margin-top: 28px;
	padding: 0 16px;
	box-sizing: border-box;
	color: #adaeaf;
	opacity: 0.8;
	cursor: pointer;
}
.mycard .icon.active {
	color: #00dc41;
}
.mycard .icon:hover {
	opacity: 1;
}
.mycard .icon-msg,
.mycard .icon-more {
	font-size: 22px;
}
.mycard .icon-msg {
	padding: 0 19px;
}
footer {
	position: absolute;
	bottom: 20px;
	width: 100%;
	text-align: center;
}
</style>
